<template>
	<view class="box">
		<!-- 头 -->
		<view class="top " style="width: 100%; padding:30rpx 30rpx 10rpx 30rpx;">
			<view class="top-box flex justify-between align-center" style=" width: 90%; ">
				<view class="address flex justify-center align-center" style="color:white; font-size: 35rpx;">
					<i class="el-icon-location-outline"></i>
					<text>惠州</text>
				</view>
				<el-input v-model="input" suffix-icon="el-icon-search" placeholder="请输入内容"
					style=" width: 65%;"></el-input>
				<u-icon @click="clickChose" color="white" size="30" name="list"></u-icon>
			</view>

		</view>
		
		<!-- 每个订单 -->
		<view class="order flex flex-column align-center justify-evenly" v-for="(item, index) in orderList" :key="item._id || index">
			<jiajiao_order :order="item" :userLocation="user.userLocation"></jiajiao_order>
		</view>

<!-- 发订单 -->
		<view class="add flex justify-center align-center" style="
	background:rgb(254, 104, 202);
	 height: 130rpx; width: 130rpx; border-radius:130rpx; position: fixed; left: 80%; bottom: 10%;" @click="goAdd">
			<u-icon name="plus" color="#fff" size="25"></u-icon>
		</view>




<!-- 筛选 -->
		<u-overlay :show="choseShow" @click="choseShow = false">
			<view class="choseBox flex flex-column" @tap.stop
				style="height: 100%; width: 70%; position: absolute;right: 0; background-color: #f6eefe;">
				<!-- 头部标题 -->
				<view class="header flex justify-between align-center"
					style="padding: 30rpx 40rpx; border-bottom: 1px solid #e9dff4;">
					<text style="color: #4c1d95; font-size: 36rpx; font-weight: bold;">筛选</text>
					<u-icon name="close" color="#4c1d95" size="22" @click="choseShow = false"></u-icon>
				</view>

				<!-- 内容区域 -->
				<view class="content-wrapper flex" style="flex: 1; width: 100%;">
					<!-- 左侧导航栏 -->
					<view class="left-nav" style="width: 25%; height: 100%; background: #f0e6fe; padding: 10rpx 0;">
						<view v-for="(category, index) in filterCategories" :key="index"
							class="nav-item flex justify-center align-center"
							:class="{ 'category-selected': currentFilterIndex === index }"
							@click="selectFilterCategory(index)" style="color: #7e3db4; font-size: 28rpx;">
							{{category.name}}
						</view>
					</view>

					<!-- 右侧内容区 -->
					<view class="right-content flex flex-column" style="width: 75%; height: 100%; padding: 20rpx;">
						<!-- 性别选择 -->
						<view v-if="currentFilterIndex === 0" class="gender-options flex flex-column"
							style="padding: 40rpx; height: 100%;">
							<!-- 添加一个容器来实现均匀分布 -->
							<view class="gender-container flex flex-column justify-around"
								style="height: 100%; width: 100%;">
								<view v-for="(item, index) in currentFilter.options" :key="index"
									class="gender-option flex flex-column align-center justify-center"
									:class="{ 'gender-selected': item.state }" @click="selectOption(index)" style="width: 300rpx; height: 300rpx; border-radius: 50%; 
										background-color: #ffffff; margin: 0 auto;
										box-shadow: 0 4px 10px rgba(126, 61, 180, 0.1);">
									<!-- 图标 -->
									<u-icon :name="index === 0 ? 'man' : 'woman'"
										:color="item.state ? '#ffffff' : '#7e3db4'" size="80">
									</u-icon>
									<!-- 文字 -->
									<text :style="{ color: item.state ? '#ffffff' : '#7e3db4', 
										fontSize: '36rpx', marginTop: '30rpx', fontWeight: 'bold' }">
										{{item.name}}
									</text>
								</view>
							</view>
						</view>

						<!-- 年级选择 -->
						<view v-else-if="currentFilterIndex === 1" class="grade-options flex flex-column">
							<view class="grade-groups">
								<view v-for="(group, groupIndex) in gradeGroups" :key="groupIndex"
									class="grade-group mb-3">
									<view class="group-title"
										style="color: #7e3db4; font-size: 28rpx; margin-bottom: 15rpx;">
										{{group.name}}
									</view>
									<view class="group-options flex flex-wrap justify-center">
										<view v-for="(item, index) in group.items" :key="index"
											class="option-item flex justify-center align-center"
											:class="{ 'selected': item.state }"
											@click="selectGradeOption(groupIndex, index)" style="width: calc(50% - 20rpx); margin: 10rpx; padding: 15rpx 0; 
												border-radius: 50rpx; background-color: #e9dff4; overflow: hidden;">
											<text
												style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
												{{item.name}}
											</text>
										</view>
									</view>
								</view>
							</view>
						</view>

						<!-- 科目选择 -->
						<view v-else-if="currentFilterIndex === 2" class="subject-options flex flex-column">
							<!-- 科目列表区域 -->
							<view class="options-list flex flex-wrap">
								<!-- 预设科目 -->
								<view v-for="(item, index) in currentFilter.options" :key="'preset-' + index"
									class="option-item flex justify-center align-center"
									:class="{ 'selected': item.state }" @click="selectOption(index)" style="width: calc(50% - 20rpx); margin: 10rpx; padding: 15rpx 0; 
										border-radius: 50rpx; background-color: #e9dff4; overflow: hidden;">
									<text style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
										{{item.name}}
									</text>
								</view>
								<!-- 自定义科目 -->
								<view v-for="(subject, index) in customSubjects" :key="'custom-' + index"
									class="option-item flex justify-center align-center"
									:class="{ 'selected': subject.state }" @click="selectCustomSubject(index)" style="width: calc(50% - 20rpx); margin: 10rpx; padding: 15rpx 0; 
										border-radius: 50rpx; background-color: #e9dff4; overflow: hidden;">
									<text style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
										{{subject.name}}
									</text>
									<view @click.stop="removeCustomSubject(index)" class="delete-icon">
										<u-icon name="close" size="12" :color="subject.state ? '#ffffff' : '#7e3db4'"
											style="margin-left: 10rpx;">
										</u-icon>
									</view>
								</view>
							</view>

							<!-- 添加自定义科目的输入框和按钮 -->
							<view class="add-custom flex flex-column" style="padding: 20rpx; margin-top: auto;">
								<u-input v-model="customInput" placeholder="添加自定义科目" border="surround" :maxlength="6"
									style="background: #ffffff; border-radius: 25rpx; padding: 10rpx 20rpx; margin-bottom: 20rpx;"></u-input>
								<u-button text="添加" color="#a855f7" @click="addCustomOption"
									style="border-radius: 25rpx;">
								</u-button>
							</view>
						</view>

						<!-- 个性标签选择 -->
						<view v-else-if="currentFilterIndex === 3" class="tag-options flex flex-column">
							<!-- 所有标签列表（包括预设和自定义标签） -->
							<view class="options-list flex flex-wrap">
								<!-- 预设标签 -->
								<view v-for="(item, index) in currentFilter.options" :key="'preset-' + index"
									class="option-item flex justify-center align-center"
									:class="{ 'selected': item.state }" @click="selectOption(index)" style="width: calc(50% - 20rpx); margin: 10rpx; padding: 15rpx 0; 
										border-radius: 50rpx; background-color: #e9dff4; overflow: hidden;">
									<text style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
										{{item.name}}
									</text>
								</view>
								<!-- 自定义标签 -->
								<view v-for="(tag, index) in customTags" :key="'custom-' + index"
									class="option-item flex justify-center align-center"
									:class="{ 'selected': tag.state }" @click="selectCustomTag(index)" style="width: calc(50% - 20rpx); margin: 10rpx; padding: 15rpx 0; 
										border-radius: 50rpx; background-color: #e9dff4; overflow: hidden;">
									<text style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
										{{tag.name}}
									</text>
									<view @click.stop="removeCustomTag(index)" class="delete-icon">
										<u-icon name="close" size="12" :color="tag.state ? '#ffffff' : '#7e3db4'"
											style="margin-left: 10rpx;">
										</u-icon>
									</view>
								</view>
							</view>

							<!-- 添加自定义标签的输入框和按钮 -->
							<view class="add-custom flex flex-column" style="padding: 20rpx; margin-top: auto;">
								<u-input v-model="customTagInput" placeholder="添加自定义标签" border="surround" :maxlength="6"
									style="background: #ffffff; border-radius: 25rpx; padding: 10rpx 20rpx; margin-bottom: 20rpx;"></u-input>
								<u-button text="添加" color="#a855f7" @click="addCustomTag" style="border-radius: 25rpx;">
								</u-button>
							</view>
						</view>

						<!-- 距离选择保持不变 -->
						<view v-else-if="currentFilterIndex === 4" class="distance-slider" style="padding: 20rpx;">
							<u-slider v-model="distance" :min="0" :max="20" :step="1" activeColor="#a855f7"
								style="margin: 20rpx 0;"></u-slider>
							<text style="color: #7e3db4; font-size: 28rpx;">{{distance}}公里以内</text>
						</view>

						<!-- 添加价格筛选部分 -->
						<view v-else-if="currentFilterIndex === 5" class="price-options flex flex-column">
							<view class="price-range flex flex-column" style="padding: 20rpx;">
								<!-- 价格输入区域 -->
								<view class="price-inputs flex align-center"
									style="background: #ffffff; border-radius: 25rpx; padding: 20rpx;">
									<!-- 最低价输入框 -->
									<view class="price-input-wrapper" style="flex: 1;">
										<u-input v-model="priceRange.min" placeholder="最低价" border="none" type="number"
											:maxlength="4" style="text-align: center;" :customStyle="{
												'text-align': 'center',
												'input-align': 'center'
											}"></u-input>
									</view>

									<!-- 分隔符 -->
									<text
										style="color: #7e3db4; padding-right: 25rpx; font-weight: bold; display: flex; align-items: center;">~</text>

									<!-- 最高价输入框 -->
									<view class="price-input-wrapper" style="flex: 1;">
										<u-input v-model="priceRange.max" placeholder="最高价" border="none" type="number"
											:maxlength="4" style="text-align: center;" :customStyle="{
												'text-align': 'center',
												'input-align': 'center'
											}"></u-input>
									</view>
								</view>

								<!-- 快捷选择 -->
								<view class="quick-select flex flex-wrap" style="margin-top: 30rpx;">
									<view v-for="(range, index) in priceRanges" :key="index"
										class="option-item flex justify-center align-center"
										:class="{ 'selected': range.selected }" @click="selectPriceRange(range)" style="width: calc(50% - 20rpx); margin: 10rpx; padding: 15rpx 0; 
											border-radius: 50rpx; background-color: #e9dff4;">
										<text>{{range.text}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 底部确认按钮 -->
				<view class="footer flex justify-center align-center" style="padding: 20rpx 40rpx;">
					<u-button text="确认" color="linear-gradient(to right bottom, #8e2ce9, #3d076d)"
						style="width: 100%; border-radius: 25rpx;" @click="confirmFilter">
					</u-button>
				</view>
			</view>
		</u-overlay>

	</view>
</template>

<script>
	const db = uniCloud.database()
	export default {
		data() {
			return {
				input: "",
				user: {},
				orderList: [],
				listTemp:[],
				choseShow: false,
				distance: 20,
				currentFilterIndex: 0,
				filterCategories: [{
						name: '性别',
						options: [{
								name: '男',
								state: false
							},
							{
								name: '女',
								state: false
							}
						]
					},
					{
						name: '年级',
						options: [{
								name: "小学",
								state: false
							},
							{
								name: "初中",
								state: false
							},
							{
								name: "高中",
								state: false
							},
							{
								name: "大学",
								state: false
							}
						]
					},
					{
						name: '科目',
						options: [{
								name: "语文",
								state: false
							},
							{
								name: "数学",
								state: false
							},
							{
								name: "英语",
								state: false
							},
							{
								name: "物理",
								state: false
							},
							{
								name: "化学",
								state: false
							},
							{
								name: "生物",
								state: false
							},
							{
								name: "历史",
								state: false
							},
							{
								name: "地理",
								state: false
							},
							{
								name: "政治",
								state: false
							}
						]
					},
					{
						name: '个性',
						options: [{
								name: "耐心",
								state: false
							},
							{
								name: "温柔",
								state: false
							},
							{
								name: "严厉",
								state: false
							},
							{
								name: "幽默",
								state: false
							},
							{
								name: "有经验",
								state: false
							},
							{
								name: "擅于沟通",
								state: false
							}
						]
					},
					{
						name: '距离',
						options: [] // 距离使用滑块，这里可以为空
					},
					{
						name: '价格',
						options: []
					}
				],
				customInput: '', // 自定义科目输入
				customTagInput: '', // 自定义标签输入
				customSubjects: [], // 自定义科目列表
				customTags: [], // 自定义标签列表
				gradeGroups: [{
						name: '小学',
						items: [{
								name: '一年级',
								state: false
							},
							{
								name: '二年级',
								state: false
							},
							{
								name: '三年级',
								state: false
							},
							{
								name: '四年级',
								state: false
							},
							{
								name: '五年级',
								state: false
							},
							{
								name: '六年级',
								state: false
							}
						]
					},
					{
						name: '初中',
						items: [{
								name: '初一',
								state: false
							},
							{
								name: '初二',
								state: false
							},
							{
								name: '初三',
								state: false
							}
						]
					},
					{
						name: '高中',
						items: [{
								name: '高一',
								state: false
							},
							{
								name: '高二',
								state: false
							},
							{
								name: '高三',
								state: false
							}
						]
					},
					{
						name: '大学',
						items: [{
								name: '大一',
								state: false
							},
							{
								name: '大二',
								state: false
							},
							{
								name: '大三',
								state: false
							},
							{
								name: '大四',
								state: false
							}
						]
					}
				],
				priceRange: {
					min: '',
					max: ''
				},
				priceRanges: [{
						text: '50以下',
						min: 0,
						max: 50,
						selected: false
					},
					{
						text: '50-100',
						min: 50,
						max: 100,
						selected: false
					},
					{
						text: '100-200',
						min: 100,
						max: 200,
						selected: false
					},
					{
						text: '200以上',
						min: 200,
						max: '',
						selected: false
					}
				],
				userLocation:null
			};
		},
		computed: {
			currentFilter() {
				return this.filterCategories[this.currentFilterIndex]
			}
			
		},
		onLoad() {
			this.init()
		},
		methods: {
			clickChose() {
				// 重置所有筛选选项
				
				// 重置性别选项
				this.filterCategories[0].options.forEach(item => {
					item.state = false
				})
				
				// 重置年级选项
				this.gradeGroups.forEach(group => {
					group.items.forEach(item => {
						item.state = false
					})
				})
				
				// 重置科目选项
				this.filterCategories[2].options.forEach(item => {
					item.state = false
				})
				this.customSubjects.forEach(item => {
					item.state = false
				})
				
				// 重置标签选项
				this.filterCategories[3].options.forEach(item => {
					item.state = false
				})
				this.customTags.forEach(item => {
					item.state = false
				})
				
				// 重置距离
				this.distance = 20
				
				// 重置价格范围
				this.priceRange = {
					min: '',
					max: ''
				}
				this.priceRanges.forEach(range => {
					range.selected = false
				})
				
				// 重置当前选中的筛选类别
				this.currentFilterIndex = 0
				
				// 显示筛选面板
				this.choseShow = true
			},
			closeShow() {
				this.choseShow = false
			},
			init() {
				uni.showLoading({
					
				})
				uni.getStorage({
					key: "jiajiao_demo_account",
					success: res => {
						this.user = res.data
					}
				})
				//获取全部订单
				let userTemp = db.collection("jiajiao_users").field("_id,introduction,nickname,role,school,sex,avater,userLocation,comment")
					.getTemp()
				let orderTemp = db.collection("order").where({
					role: `${this.user.role == '老师'?'学生':'老师'}`
				}).getTemp()
				db.collection(orderTemp, userTemp).orderBy('publicTime', "desc").get().then(res => {
					this.orderList = res.result.data
					this.listTemp = [...res.result.data]  // 保存原始数据的副本
					
					uni.hideLoading()
				})
			},
			goAdd() {
				db.collection('order').where({
					submit_user: this.user._id
				}).count().then(res => {
					// if (res.result.total == 1) {
					// 	uni.showToast({
					// 		title: "您已经发布过订单了噢~",
					// 		icon:'none'
					// 	})
					// } else {

					// }
					uni.navigateTo({
						url: `/pages/addOrder/addOrder`
					})
				})

			},
			selectFilterCategory(index) {
				this.currentFilterIndex = index
			},
			selectOption(index) {
				if (this.currentFilterIndex === 0) {
					// 性别是单选
					this.filterCategories[0].options.forEach((item, i) => {
						item.state = i === index
					})
				} else {
					// 其他是多选
					this.currentFilter.options[index].state = !this.currentFilter.options[index].state
				}
			},
			selectGradeOption(groupIndex, itemIndex) {
				this.gradeGroups[groupIndex].items[itemIndex].state = !this.gradeGroups[groupIndex].items[itemIndex].state
			},
			addCustomOption() {
				const input = this.customInput.trim()
				if (!input) {
					uni.showToast({
						title: '请输入科目名',
						icon: 'none'
					})
					return
				}

				// 检查是否与预设科目重
				if (this.currentFilter.options.some(item => item.name === input)) {
					uni.showToast({
						title: '该科目已存在于预设科目中',
						icon: 'none'
					})
					return
				}

				// 检查是否与自定义科目重复
				if (this.customSubjects.some(item => item.name === input)) {
					uni.showToast({
						title: '该科目已存在于自定义科目中',
						icon: 'none'
					})
					return
				}

				// 添加新科目
				this.customSubjects.push({
					name: input,
					state: false
				})
				this.customInput = ''

				uni.showToast({
					title: '添加成功',
					icon: 'success'
				})
			},
			addCustomTag() {
				const input = this.customTagInput.trim()
				if (!input) {
					uni.showToast({
						title: '请输入标签名称',
						icon: 'none'
					})
					return
				}

				// 检查是否与预设标签重复
				if (this.currentFilter.options.some(item => item.name === input)) {
					uni.showToast({
						title: '该标签已存在于预设标签中',
						icon: 'none'
					})
					return
				}

				// 检查是否与自定义标签重复
				if (this.customTags.some(tag => tag.name === input)) {
					uni.showToast({
						title: '该标签已存在于自定义标签中',
						icon: 'none'
					})
					return
				}

				// 添加新标签
				this.customTags.push({
					name: input,
					state: false
				})
				this.customTagInput = ''

				uni.showToast({
					title: '添加成功',
					icon: 'success'
				})
			},
			selectCustomSubject(index) {
				this.customSubjects[index].state = !this.customSubjects[index].state
			},
			removeCustomSubject(index) {
				this.customSubjects.splice(index, 1)
			},
			selectCustomTag(index) {
				this.customTags[index].state = !this.customTags[index].state
			},
			removeCustomTag(index) {
				this.customTags.splice(index, 1)
			},
			selectPriceRange(range) {
				this.priceRanges.forEach(item => item.selected = false)
				range.selected = true
				this.priceRange.min = range.min.toString()
				this.priceRange.max = range.max.toString()
			},
			confirmFilter() {
				// 价格验证
				if (this.priceRange.min && this.priceRange.max &&
					parseInt(this.priceRange.min) > parseInt(this.priceRange.max)) {
					uni.showToast({
						title: '最低价不能大于最高价',
						icon: 'none'
					})
					return
				}

				// 重置订单列表为原始数据
				this.orderList = [...this.listTemp]
				

				// 性别筛选
				const selectedSex = this.filterCategories[0].options.find(item => item.state)?.name
				if (selectedSex) {
					this.orderList = this.orderList.filter(order => 
						order.submit_user[0].sex === selectedSex
					)
				}

				// 年级筛选
				const selectedDetailGrades = this.gradeGroups.reduce((acc, group) => {
					const selected = group.items.filter(item => item.state).map(item => ({
						grade: item.name,
						category: group.name
					}))
					return [...acc, ...selected]
				}, [])

				if (selectedDetailGrades.length > 0) {
					this.orderList = this.orderList.filter(order => {
						const orderGrades = order.grade.filter(g => g.state).map(g => g.name)
						// 检查是否有选中的年级类别在订单的年级中
						return selectedDetailGrades.some(selected => {
							// 根据具体年级判断属于哪个大类
							switch (selected.category) {
								case '小学':
									return orderGrades.includes('小学')
								case '初中':
									return orderGrades.includes('初中')
								case '高中':
									return orderGrades.includes('高中')
								case '大学':
									return orderGrades.includes('大学')
								default:
									return false
							}
						})
					})
				}

				// 科目筛选
				const selectedSubjects = [
					...this.filterCategories[2].options.filter(item => item.state).map(item => item.name),
					...this.customSubjects.filter(subject => subject.state).map(subject => subject.name)
				]
				if (selectedSubjects.length > 0) {
					this.orderList = this.orderList.filter(order => {
						const orderSubjects = order.subject.filter(s => s.state).map(s => s.name)
						return selectedSubjects.some(subject => orderSubjects.includes(subject))
					})
				}

				// 标签筛选
				const selectedTags = [
					...this.filterCategories[3].options.filter(item => item.state).map(item => item.name),
					...this.customTags.filter(tag => tag.state).map(tag => tag.name)
				]
				if (selectedTags.length > 0) {
					this.orderList = this.orderList.filter(order => {
						const orderTags = order.tags.filter(t => t.state).map(t => t.name)
						return selectedTags.some(tag => orderTags.includes(tag))
					})
				}

				// 价格筛选
				const minPrice = this.priceRange.min ? parseInt(this.priceRange.min) : null
				const maxPrice = this.priceRange.max ? parseInt(this.priceRange.max) : null
				if (minPrice !== null || maxPrice !== null) {
					this.orderList = this.orderList.filter(order => {
						const orderMinPrice = parseInt(order.money.min)
						const orderMaxPrice = parseInt(order.money.max)
						if (minPrice !== null && maxPrice !== null) {
							return orderMinPrice >= minPrice && orderMaxPrice <= maxPrice
						} else if (minPrice !== null) {
							return orderMinPrice >= minPrice
						} else if (maxPrice !== null) {
							return orderMaxPrice <= maxPrice
						}
						return true
					})
					
				}
				
				
				// 筛选距离
				// this.orderList = this.orderList.filter(order => {
				// 	const otherLocation = order.submit_user[0].userLocation
				// 	const userLocation = this.user.userLocation
				// 	const R = 6371; // 地球半径（单位：公里）
				// 	const lat1 = userLocation?.latitude || 0;
				// 	const lon1 = userLocation?.longitude || 0;
				// 	const lat2 = otherLocation?.latitude || 0;
				// 	const lon2 = otherLocation?.longitude || 0;
									  
				// 	const toRad = (value) => (value * Math.PI) / 180;
				// 	const dLat = toRad(lat2 - lat1);
				// 	const dLon = toRad(lon2 - lon1);
									  
				// 	const a =
				// 	  Math.sin(dLat / 2) * Math.sin(dLat / 2) +
				// 	  Math.cos(toRad(lat1)) *
				// 	    Math.cos(toRad(lat2)) *
				// 	    Math.sin(dLon / 2) *
				// 	    Math.sin(dLon / 2);
									  
				// 	const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
				//     let distance = (R * c).toFixed(1);
				// 	return distance <= this.distance
				// })
				

				// 关闭筛选面板
				this.choseShow = false

				// 显示筛选结果
				if (this.orderList.length === 0) {
					uni.showToast({
						title: '没有找到符合条件的订单',
						icon: 'none'
					})
				} else {
					uni.showToast({
						title: `找到 ${this.orderList.length} 个符合条件的订单`,
						icon: 'none'
					})
				}

			}

		},
		watch: {
			'priceRange.min': function(val) {
				if (val && this.priceRange.max && parseInt(val) > parseInt(this.priceRange.max)) {
					uni.showToast({
						title: '最低价不能大于最高价',
						icon: 'none'
					})
					this.priceRange.min = ''
				}
			},
			'priceRange.max': function(val) {
				if (val && this.priceRange.min && parseInt(val) < parseInt(this.priceRange.min)) {
					uni.showToast({
						title: '最高价不能小于最低价',
						icon: 'none'
					})
					this.priceRange.max = ''
				}
			}
		}

	}
</script>

<style>
	page {
		background: linear-gradient(to bottom right, rgb(114, 135, 254), rgb(130, 88, 186));

	}

	::v-deep .el-input>:focus {
		border: 2px solid #a855f7 !important;
	}

	.selected {
		background-color: #a855f7 !important;
		color: #ffffff !important;
	}

	.gender-item,
	.grade-item,
	.subject-item,
	.tag-item {
		transition: all 0.3s;
	}

	.gender-item:active,
	.grade-item:active,
	.subject-item:active,
	.tag-item:active {
		transform: scale(0.95);
	}

	.category-item {
		position: relative;
		transition: all 0.3s;
	}

	.category-selected {
		background-color: #ffffff;
		color: #a855f7 !important;
		font-weight: bold;
	}

	.category-item:active {
		transform: scale(0.95);
	}

	.subjects-list {
		max-height: 400rpx;
		overflow-y: auto;
	}

	.nav-item {
		position: relative;
		transition: all 0.3s ease;
		margin: 10rpx 0;
		padding: 25rpx 10rpx;
		border-radius: 0 50rpx 50rpx 0;
		width: 100%;
	}

	.category-selected {
		background-color: #ffffff !important;
		color: #a855f7 !important;
		font-weight: bold;
		box-shadow: -2px 0 10px rgba(126, 61, 180, 0.1);
	}

	.category-selected::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 6rpx;
		height: 60%;
		background: linear-gradient(to bottom, #a855f7, #7e3db4);
		border-radius: 3rpx;
	}

	.option-item {
		transition: all 0.3s;
	}

	.option-item:active {
		transform: scale(0.95);
	}

	.right-content {
		overflow-y: auto;
	}

	.gender-option {
		transition: all 0.3s ease;
		border: 2px solid transparent;
	}

	.gender-option:active {
		transform: scale(0.95);
	}

	.gender-selected {
		background: linear-gradient(135deg, #a855f7, #7e3db4) !important;
		box-shadow: 0 4px 15px rgba(126, 61, 180, 0.3) !important;
	}

	/* 确保这个式优先级高于其他样式 */
	.gender-selected .u-icon,
	.gender-selected text {
		color: #ffffff !important;
	}
</style>